<template>
    <div class="Main">
        <div class="w1440">
            <div v-loading="loading" class="flex_fsw">
                <div class="MainLeft w72">
                    <div class="ForumBox bgwhite slideTxt min400">

                        <el-tabs v-model="activeTab">
                            <el-tab-pane label="博主列表" name="first">
                                <div v-if="currentList.length" class="blogger-list">
                                    <div class="Popular_bloggers">
                                        <div class="Popular_bloggersBox">
                                            <ul class="d-flex f-wrap j-sb">
                                                <li v-for="(item, index) in currentList" :key="index">
                                                    <div @click="goToTargetPage('/otherInfo?uid='+item.uid, item.uid)" class="img">
                                                        <div class="imgbox">
                                                            <span><img src="../assets/uploadfiles/image/logo.png" alt=""></span>
                                                        </div>
                                                    </div>
                                                    <div class="txt">
                                                        <div class="tit dot pointer" @click="goToTargetPage('/otherInfo?uid='+item.uid, item.uid)"><a>{{item.username}}</a></div>
                                                        <div class="dec dot">作品 {{formatCommentCount(item.postNum)}} / 粉丝 {{formatCommentCount(item.fans)}}</div>
                                                        <div class="gzbtn" v-if="item.uid !== userInfoCommon.uid" @click="followUser(item)">{{item.isFollow ? '取消关注' : '+ 关注'}}</div>
                                                    </div>
                                                </li>
                                            </ul>
                                        </div>
                                    </div>
                                    <!-- 分页 -->
                                    <div class="pager d-flex j-center">
                                        <el-pagination
                                        v-model:current-page="queryParams.pageNo"
                                        v-model:page-size="queryParams.pageSize"
                                        background
                                        layout="prev, pager, next, jumper"
                                        :total="queryParams.total"
                                        />
                                    </div>
                                </div>
                                <el-empty v-else :image-size="200" />
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
                <div class="MainLeftRight w26">
                    <!-- 热门博主 -->
                    <HotBlogger :showMore="false" ref="hotBlogger" @updateUserInfo="getHotBlogger" />
                </div>
            </div>
        </div>
    </div>
</template>

<script setup name="BloggerList">
import { userApi } from '@/api';
import { computed, ref, reactive, onBeforeMount, watch } from 'vue';
import { useRouter } from 'vue-router';
import { commonMethods } from '@/utils/common';
import { storeToRefs } from 'pinia';
import { useCommonStore } from '@/store/Common';
import { ElNotification  } from 'element-plus';
// 组件
import HotBlogger from '@/components/HotBlogger.vue'; // // 热门博主

// 公共方法和计算属性
const { formatCommentCount } = commonMethods();

// 公共store
const commonStore = useCommonStore();
const {userInfoCommon} = storeToRefs(commonStore);

// 路由
const router = useRouter();
const goToTargetPage = (path, uid) => {
    // 如果是自己的信息，跳转到用户信息页面，否则跳转到其他用户信息页面
    if(uid === userInfoCommon.value.uid) {
        router.push('/userInfo');
    }else{
        router.push(path);
    };
}

/**
 * @name 数据
 */
const partName = ref(''); // 版块名称
const activeTab = ref('first'); // 选中的标签页
const loading = ref(true); // 加载中

/**
 * @name 生命周期
 */
onBeforeMount(() => {
    getHotBlogger();
})

/**
 * @name 博主列表
 */
 const currentList = ref([]);
 const queryParams = reactive({
    pageNo: 1,
    pageSize: 12,
    keyword: '',
    timeRange: 0,
    total: 0
})
const getHotBlogger = () => {
    loading.value = true;
    userApi.getHotBlogger(queryParams).then((res) => {
        let {list} = res.result;
        list.filter((item) => {
            item.fans = parseInt(item.fans);
        })
        currentList.value = list;
        queryParams.total = Number(res.result.total);
    }).catch(err => {}).finally(() => {
        loading.value = false;
    });
}

// 关注用户
const hotBlogger = ref(null);
const followUser = (item) => {
    if(item.isFollow) {
        // 取消关注
        userApi.followCancel({id: item.uid}).then((res) => {
            item.isFollow = false;
            ElNotification({
                title: '提示',
                message: '已取消关注',
                type: 'success',
            })
            if(hotBlogger.value) {
                hotBlogger.value.getHotBlogger() // 调用子组件方法
            }
            item.fans = item.fans - 1; // 减少粉丝数
        }).catch(err => {});
    }else{
        // 关注用户
        userApi.followAdd({id: item.uid}).then((res) => {
            item.isFollow = true;
            ElNotification({
                title: '提示',
                message: '已关注',
                type: 'success',
            })
            if(hotBlogger.value) {
                hotBlogger.value.getHotBlogger() // 调用子组件方法
            }
            item.fans = item.fans + 1; // 增加粉丝数
        }).catch(err => {});
    }
}

// 监听查询参数变化
watch(() => queryParams.pageNo, () => {
    getHotBlogger();
})


</script>

<style lang="less" scoped>
:deep(.el-carousel__container) {
    height: 355px;
}

:deep(.el-tabs__item) {
    font-size: 20px;
    color: #666;
    padding-bottom: 10px;
}

:deep(.el-tabs__item.is-active) {
    color: #333;
}

:deep(.el-tabs__active-bar) {
    background-color: #00753e;
}
    .blogger-list{
        min-height: 300px;
        ul{
            li{
                width: 45%;
            }
        }
    }
</style>